<template>
  <view class="profile">
    <view class="items">
      <uni-list>
        <uni-list-item class="item-user-info" :clickable="true" @click="upImg()">
					<text slot="header" class="slot-box slot-text">头像</text>
					<template slot="footer">
					  <image class="slot-image" :src="user.avatar_url" style="width: 100rpx; height: 100rpx;border-radius: 50%;" ></image>
					</template>
        </uni-list-item>
				<uni-list-item title="昵称" :rightText="user.name" :clickable="true" @click="updateUserName()"></uni-list-item>
        <uni-list-item title="ID号" :rightText="user.id+''"></uni-list-item>
        <uni-list-item title="我的等级" :rightText="getMyGrade(user.grade)"></uni-list-item>
				<uni-list-item title="实名认证" >
					<view slot="footer" class="slot-box" >
						<view class="bind-recommender bund-recommender"  v-if="user.is_freelance_auth" @click="goIdentification">已认证</view>
						<view class="bind-recommender" v-else @click="goIdentification" >去认证</view>
					</view>
				</uni-list-item>
        <uni-list-item title="邀请码" :rightText="user.invite_code">
					<view slot="footer" class="slot-box">
						<image src="/static/images/copycode.png" class="copycode-btn" mode="" @click="copy(user.invite_code)"></image>
						<view>{{ user.invite_code }}</view>
					</view>
				</uni-list-item>
				<uni-list-item title="推荐人" :rightText="user.invite_code" @click="bindRecommender" :clickable="true">
					<view slot="footer" class="slot-box" >
						<view class="bind-recommender"  v-if="user.parent_name==''">点击绑定</view>
						<view class="bind-recommender bind-recommender-gray" v-else >{{ user.parent_name }}</view>
					</view>
				</uni-list-item>
        <uni-list-item title="推荐人手机号" :rightText="user.parent_phone ? user.parent_phone : '暂无'"></uni-list-item>
				<uni-list-item title="推荐人ID" :rightText="user.parent_id!=0 ? user.parent_id + '' : '暂无'"></uni-list-item>
				<!-- <uni-list-item title="支付宝管理" :rightText="user.invite_code">
					<view slot="footer" class="slot-box" >
						<view class="bind-recommender" @click="bindAliAccount" v-if="user.alipay_user_no==''">点击添加</view>
						<view class="bind-recommender bund-recommender" @click="bindAliAccount" v-else >已绑定</view>
					</view>
				</uni-list-item> -->
        <uni-list-item title="注册时间" :rightText="user.created_at"></uni-list-item>
      </uni-list>
    </view>
		<view class="bind-recommender-pop" v-if="bindPopShow">
			<view class="bind-recommender-pop-content">
				<view class="bind-recommender-pop-title">绑定推荐人</view>
				<input type="text" class="invite-code-ipt" value="" placeholder="请输入推荐人的邀请码" v-model="invite_code" />
				<view class="bind-recommender-pop-bar">
					<view @click="cancle()">取消</view>
					<view @click="conform()">确认</view>
				</view>
			</view>
		</view>
		<view class="bind-recommender-pop" v-if="updateUserNameShow">
			<view class="bind-recommender-pop-content">
				<view class="bind-recommender-pop-title">修改昵称</view>
				<input type="text" class="invite-code-ipt" value="" v-model="userName" :placeholder="user.name" />
				<view class="bind-recommender-pop-bar">
					<view @click="cancleUpUserName()">取消</view>
					<view @click="conformUpUserName()">确认</view>
				</view>
			</view>
		</view>
  </view>
</template>

<script>
import store from 'store'
import {mapGetters,mapMutations} from 'vuex'
import CurrentUser from "mixins/CurrentUser"
import { userInfoUpdate } from "api/userApi"
import { getUser } from "api/userApi"
import Base64 from 'base-64';
let date = new Date()
let year = date.getFullYear()
let month = date.getMonth() + 1;
let day = date.getDate()
let signNum = Base64.encode((year + month * 2 + day * 3) * 2)


export default {
  name: "profile",
  store,
	mixins: [
		CurrentUser
	],
  computed: {
    ...mapGetters(['user'])
  },
	data(){
		return {
			invite_code:null,
			bindPopShow:false,
			updateUserNameShow:false,
			userName:null
		}
	},
  methods: {
		...mapMutations([
			'setUser'
		]),
		async getUser(){
			let response =  await getUser()
			this.setUser(response)
		},
		copy(data){
			uni.setClipboardData({
			    data: data,
			    success: function () {
						uni.showToast({
							icon:'none',
							title:'复制成功'
						}) 
			    }
			})
		},
    getMyGrade(grade) {
      if (grade === 'normal') {
        return '普通会员'
      }
      if (grade === 'tvip') {
        return '24小时VIP会员'
      }
      if (grade === 'vip') {
        return 'VIP会员'
      }
    },
		async conform(){
			if(this.invite_code){
				let parms = {
					invite_code:this.invite_code
				}
				const response = await userInfoUpdate(parms)
				if(!response.message){
					uni.showModal({
						content:'绑定成功',
						showCancel:false
					})
				}else{
					uni.showModal({
						title:'提示',
						content:Object.values(response.errors)[0][0],
						confirmText:'知道了',
						confirmColor:'#FF6011',
						showCancel:false
					})
				}
				this.bindPopShow = false
				await this.getCurrentUser()//获取用户信息
			}else{
				uni.showToast({
					icon:'none',
					title:'请输入邀请码'
				})
			}
		},
		async conformUpUserName(){
			if(this.userName){
				let parms = {
					// data:{
					// 	name:this.userName
					// },
					name:this.userName
				}
				const response = await userInfoUpdate(parms)
				if(!response.message){
					uni.showModal({
						content:'修改成功',
						showCancel:false
					})
				}
				this.updateUserNameShow = false
				await this.getCurrentUser()//获取用户信息
			}else{
				uni.showToast({
					icon:'none',
					title:'请输入昵称'
				})
			}
		},
		updateUserName(){
			this.updateUserNameShow = true
		},
		upImg(){
			let _this = this;
			uni.showModal({
				cancelText:'取消',
				confirmText:'确认修改',
				confirmColor:'#FF6011',
				title:'温馨提示',
				content:'您确认修改头像吗？',
				success: function (res) {
					if (res.confirm) {
						uni.chooseImage({
							count: 1, //默认9
							sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
							sourceType: ['album'], //从相册选择
							success: function (chooseImageRes) {
								const tempFilePaths = chooseImageRes.tempFilePaths;
								let  contentText = JSON.stringify(tempFilePaths)
								let token = uni.getStorageSync('token');
								let Authorization = ''
								if(token==''){
									Authorization = 'Bearer ' + store.getters.accessToken
								}else{
									Authorization = 'Bearer ' + token
								}
								const uploadTask = uni.uploadFile({
									url:_this.uploadUrl,
								  // url: 'https://shopdev.littleshop.shop/api/v1/files',//测试
								  // url: 'https://shop.littleshop.shop/api/v1/files', //正式
								  method: 'post',
								  filePath: tempFilePaths[0],
								  name: 'image',
								  header: {
										Authorization: Authorization,
										sign:signNum
									},
								  success: async (uploadFileRes) => {
								    let image = JSON.parse(uploadFileRes.data)
										let parms = {
											// data:{
											// 	avatar:image.image
											// }
											avatar:image.image
										}
										userInfoUpdate(parms).then(res=>{
											if(!res.message){
												getUser().then(res=>{
													_this.setUser(res)
												})
											}
										})
								  }
								})
							}
						})
					}
				}
			})
		},
		async cancle(){
			this.bindPopShow = false
			await this.getCurrentUser()//获取用户信息
		},
		async cancleUpUserName(){
			this.updateUserNameShow = false
			await this.getCurrentUser()//获取用户信息
		},
		bindRecommender(){
			this.bindPopShow = true
		},
		bindAliAccount(){
			uni.navigateTo({
				url:'/packs/pages/withdrawal/addAliAccount'
			})
		},
		goIdentification(){
			uni.navigateTo({
				url:'/packs/pages/withdrawal/realIdentification'
			})
		}
  }
}
</script>

<style lang="scss" scoped>
.item-user-info{
	padding:30rpx 0 0 0;
}
.copycode-btn{
	display: block;
	width: 30rpx;
	height: 30rpx;
	margin-right: 20rpx;
}
.slot-box{
	display: flex;
	align-items: center;
	font-size: 26rpx;
	color:#999999;
}
.slot-text{
	color:#333333;
}
.bind-recommender{
	color:#FF5F4D;
}
.bund-recommender{
	color:#999999;
}
.bind-recommender-gray{
	color:#999999;
}
.bind-recommender-pop{
	width: 100%;
	height: 100%;
	position: fixed;
	top:0;
	left:0;
	background: rgba(0,0,0,.5);
	z-index: 999;
}
.bind-recommender-pop-content{
	width:600rpx;
	height:350rpx;
	position: absolute;
	left:0;
	top:0;
	right: 0;
	bottom: 0;
	margin:auto;
	background: #FFFFFF;
	border-radius: 20rpx;	
}
.bind-recommender-pop-title{
	font-size: 30rpx;
	font-weight: 500;
	text-align: center;
	line-height: 90rpx;
}
.bind-recommender-pop-bar{
	width: 100%;
	display: flex;
	height: 80rpx;
	position: absolute;
	background: #F6F6F6;
	border-radius: 0 0 20rpx 20rpx;
	left:0;
	bottom: 0;
	>view{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 50%;
		font-size: 28rpx;
	}
	>view:nth-child(1){
		color: #999999;
	}
	>view:nth-child(2){
		background: #FED161;
		color: #666666;
		border-radius: 0 0 20rpx 0rpx;
	}
}
.invite-code-ipt{
	width:550rpx;
	margin:40rpx auto;
	font-size: 28rpx;
}

</style>
